<!--
 * @Author: mat
 * @Date: 2021-04-06 23:25:33
 * @LastEditTime: 2021-09-30 11:30:06
 * @Description: file content
-->
<template>
	<div class="tool-container">
		<div id="navigation-outring" class="toolrow-wrap"></div>
		<div id="navigation-button " class="toolrow-wrap"></div>
		<div class="toolrow-wrap">
			<el-tooltip class="item" effect="dark" content="二三位切换" placement="top-start">
				<button class="btn-23d bottom-btn" @click="switch23D"></button>
			</el-tooltip>
		</div>
		<div class="toolrow-wrap">
			<el-tooltip class="item" effect="dark" content="全屏" placement="top-start">
				<button class="btn-fullSc bottom-btn" @click="fullScClick"></button>
			</el-tooltip>
		</div>

		<div class="toolrow-wrap">
			<el-tooltip class="item" effect="dark" content="工具条" placement="top-start">
				<button class="btn-otherTools bottom-btn" @click="showControll('toolbar')"></button>
			</el-tooltip>
		</div>

		<otherTools v-if="showCtr.toolbar" />
	</div>
</template>

<script>
import otherTools from './otherTools/index';
export default {
	components: {
		otherTools,
	},
	data() {
		return {
			showCtr: {
				toolbar: true,
			},
		};
	},
	mounted() {
		Cesium.C_NavigationMixin.mixinWidget(viewer, { enableDistanceLegend: false });
		Cesium.C_layerGroupHandle.addLayerGroup('toolDrawGroup');
		Cesium.C_layerGroupHandle.addLayer('toolDrawGroup', 'toolDrawLayer');
	},
	methods: {
		switch23D() {
			Cesium.C_changeSceneMode(viewer.scene);
		},
		fullScClick() {
			Cesium.C_fullScreen(document.body);
		},
		showControll(msg) {
			this.showCtr[msg] = !this.showCtr[msg];
		},
		clearDrawing() {
			new Cesium.C_DrawHelper(viewer.scene).cleanAllMeasure();
			Cesium.C_layerGroupHandle.clearLayer('toolDrawGroup', 'toolDrawLayer');
			// this.$store.commit('setDrawArr', []);
		},
	},
};
</script>

<style lang="scss">
/* 右下角工具栏包围 */
.tool-container {
	position: fixed;
	width: 20.1vw;
	bottom: 2.5vw;
	right: 1%;
	z-index: 101;
	pointer-events: none;
	/* 工具栏横条包裹 */
	.toolrow-wrap {
		width: 100%;
		clear: both;
		// width: 2vw;
		height: 1.8vw;
		& + .toolrow-wrap {
			margin-bottom: 17px;
		}
		.bottom-btn {
			width: 41px;
			height: 39px;
			background-size: 100% 100%;
			display: block;
			cursor: pointer;
			border: 0;
			margin: auto;
			padding: 0;
			pointer-events: auto;
			float: right;
			margin-right: 10px;
		}
	}
	/* 工具条按钮 */
	.toolbar {
		float: left;
		width: 80%;
		display: flex;
	}
	/* 右侧全屏等按钮 */
	.sidebar-controll {
		width: 4%;
		float: right;
	}
	.tool-delete-btn {
		pointer-events: auto;
		font-size: 1.1vw !important;
		border: unset !important;
		box-shadow: unset !important;
		color: #bbb !important;
	}
	.btn-23d {
		background-image: url('~@/assets/images/tools/toolBtns/23dSwitch.png');
		&:hover {
			background-image: url('~@/assets/images/tools/toolBtns/23dSwitch-ac.png');
		}
	}
	.btn-fullSc {
		background-image: url('~@/assets/images/tools/toolBtns/fullSc.png');
		&:hover {
			background-image: url('~@/assets/images/tools/toolBtns/fullSc-ac.png');
		}
	}
	.btn-otherTools {
		background-image: url('~@/assets/images/tools/toolBtns/otherTools.png');
		&:hover {
			background-image: url('~@/assets/images/tools/toolBtns/otherTools-ac.png');
		}
	}
}
.el-tooltip__popper {
	pointer-events: none !important;
}
</style>
